<template>
  <KScrollView :key="key" scroll-top="0px" scroll-y scroll-with-animation class="shop-mall-goods-list">
    <KView class="shop-mall-goods-list-div">
      <goods-item v-for="goods in goodsList" :key="`goods_${goods.id}`" :goods="goods" :buy-record="buyRecord" @add-goods="addGoods"
        @img-click="imgClick">
      </goods-item>
      <KView class="shop-mall-goods-item-null"></KView>
    </KView>
  </KScrollView>
</template>

<script>
  import GoodsItem from './goodsItem';

  import SystemUtil from 'utils/systemUtil';

  export default {
    props: {
      shopGoods: {
        type: Object,
        required: true
      },
      buyRecord: Object
    },

    computed: {
      goodsList() {
        return this.shopGoods.currentGoods.goodsList;
      }
    },

    watch: {
      goodsList() {
        this.key = SystemUtil.getId();
      }
    },

    data() {
      return {
        key: SystemUtil.getId(),
      };
    },

    methods: {
      addGoods(goods) {
        this.$emit('add-goods', goods);
      },

      imgClick(goods) {
        this.$emit('goods-click', goods);
      }
    },

    components: {
      GoodsItem
    }
  };

</script>

<style lang="scss">
  .shop-mall-goods-list {
    height: 100%;

    .shop-mall-goods-list-div {
      padding-right: formatPx(30);
    }

    .shop-mall-goods-item {
      margin-bottom: formatPx(30);
    }

    .shop-mall-goods-item-null {
      height: formatPx(90);
    }
  }

</style>
